<template>
  <div id="main">
    <div ref="echart" id="chart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: ["option"],
  data() {
    return {};
  },
  methods: {
    //渲染图表
    getdata() {
      // 绘制图表
      let myChart = echarts.getInstanceByDom(this.$refs.echart);
      if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(this.$refs.echart);
      }
      
      let aaa=this.option;
      myChart.setOption(aaa,true);
    },
  },
  
  watch: {
    option() { //对传递图表数据进行监听
     let myChart = echarts.getInstanceByDom(this.$refs.echart);
     if (myChart == null) {
        // 如果不存在，就进行初始化
        myChart = echarts.init(this.$refs.echart);
      }
      this.getdata();
    },
  },
};
</script>

<style lang="less" scoped>
#chart {
  width: 1000px;
  height: 700px;
  margin: 20px;
}
</style>